<template>
<el-form ref="form" :model="saveData" class="form-group" label-width="65px">
  <h4>个人信息</h4>
  <div class="item-group">
    <h5>1. 您的性别:</h5>
    <el-radio-group v-model="saveData.sex">
      <el-radio label="男" >男</el-radio>
      <el-radio label="女">女</el-radio>
    </el-radio-group>
  </div>
  <div class="item-group">
    <h5>2. 您的年龄是:</h5>
    <div class="input-small">
      <input type="number" placeholder="" min="10" max="100" v-model="saveData.age" class="under-line">
      </input>
      <span>岁</span>
    </div>
  </div>
  <div class="item-group">
    <h5>3. 您的职业是:</h5>
    <el-radio label="学生" v-model="saveData.job">学生</el-radio>
    <div class="input-small">
      其他:<input type="text" placeholder="请输入职业" v-model="saveData.job" class="under-line"></input>
    </div>
  </div>
  <div class="item-group">
    <h5>4. 您是否用过在线医疗服务？</h5>
    <el-radio-group v-model="saveData.medicalExperience">
      <el-radio label="用过">用过</el-radio>
      <el-radio label="没有">没有</el-radio>
    </el-radio-group>
  </div>
  <div class="item-group">
    <h5>5. 医生这个职业是需要大量的专业知识：</h5>
    <el-radio-group v-model="saveData.professionSense">
      <el-radio label="非常赞同">非常赞同</el-radio>
      <el-radio label="比较赞同">比较赞同</el-radio>
      <el-radio label="一般赞同">一般赞同</el-radio>
      <el-radio label="比较不赞同">比较不赞同</el-radio>
      <el-radio label="非常不赞同">非常不赞同</el-radio>
    </el-radio-group>
  </div>
  <div class="item-group">
    <h5>6. 医生是权威的:</h5>
    <el-radio-group v-model="saveData.doctorSense">
      <el-radio label="非常赞同">非常赞同</el-radio>
      <el-radio label="比较赞同">比较赞同</el-radio>
      <el-radio label="一般赞同">一般赞同</el-radio>
      <el-radio label="比较不赞同">比较不赞同</el-radio>
      <el-radio label="非常不赞同">非常不赞同</el-radio>
    </el-radio-group>
  </div>
  <div class="item-group">
    <h5>7. 您的支付宝账号:</h5>
    <div class="input-small">
      <input type="text" placeholder="输入支付宝账号" v-model="saveData.alipayId" class="under-line"></input>
    </div>
    <div style="color: gray;font-size: 20px;">
      研究人员将在5个工作日内对您的数据进行核对。没有问题将报酬发放到您的支付宝账户内。 <br>有问题请联系648099533@qq.com。
    </div>
  </div>
  <el-button type="primary" :disabled="isFinish" @click="onSubmit">提交</el-button>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        isFinish: false,
        saveData: {
          id: this.$store.state.peopleId,
          sex:'',
          age:'',
          job:'',
          medicalExperience:'',
          professionSense:'',
          doctorSense:'',
          alipayId:''
        }
      };
    },
    methods: {
      onSubmit() {
        let self = this;
        for (let k in self.saveData) {
          if (!self.saveData[k]) {
            self.$confirm('所有信息均为必填！', '提示', {
              showCancelButton: false,
              confirmButtonText: '确定',
              type: 'error',
            }).then(function() {}).catch(function() {});
            
            return;
          }
        }
        // self.$api.user.updateInfo(self.saveData).then(function(res) {
        //   self.$confirm('您已完成本轮标记，感谢您的支持！', '提示', {
        //     showCancelButton: "false",
        //     confirmButtonText: '确定',
        //     type: 'success',
        //   }
        //   ).then(function() {
        //     // self.$router.push('/login');
        //     self.$router.push('/over');
        //   }).catch(function() {
        //     self.$router.push('/login');
        //     // self.$router.push('/login');
        //   })
        // });
        self.$api.user.updateInfo(self.saveData).then(function(res) {
          self.$confirm('您已完成本轮标注，感谢您的支持！', '提示', {
                confirmButtonText: '结束',
                cancelButtonText: '下一轮标注',
            type: 'success',
              }
          ).then(function() {
            // self.$router.push('/login');
            self.$router.push('/over');
          }).catch(function() {
            self.$router.push('/login');
            // self.$router.push('/login');
          })
        });

      }
    },
    mounted() {
      // 没有登录直接进入该页面
      if (!this.$store.state.peopleId) {
        this.$router.push('/login');
      }
    }
  };
</script>

<style >


  .form-group {
    vertical-align: middle;
    text-align: center;
    border: 1px solid #DCDFE6;
    width: 600px;
    /*width: 80%;*/
    height: auto;
    margin: auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
    font-size: 20px;
  }
  .item-group {
    font-size: 20px;
    text-align: left;
    margin: 25px auto;
  }
  .input-small {
    display:flex;
  }
  .under-line {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-radius:0;
    outline: none;
    text-align: center;
  }
  .el-message-box__message p {
    line-height: 20px;
  }
  .under-line{
    font-size: 20px;
  }

  .el-radio__inner {
    width: 20px;
    height: 20px;
  }
</style>
